<template>
    <div>
        <Editor :model-value="content" :init="myTinyInit" id="tinydemo"  @update:model-value="change"></Editor>
    </div>
</template>
 
<script setup>
// import {computed, defineEmits, defineProps, onMounted, reactive, ref, watch} from 'vue'
import {computed, onMounted, reactive, ref, watch, watchEffect} from 'vue'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/models/dom/model";
import 'tinymce/plugins/help/plugin';
import 'tinymce/plugins/help/js/i18n/keynav/en.js'
// import '../../public/tinymce/langs/zh-Hans.js'
 
//按需引入插件
import "tinymce/plugins/image";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/link";
import "tinymce/plugins/help";
import "tinymce/plugins/wordcount";
 
import axios from "axios";
// import {useStore} from "vuex";
import {ElNotification} from "element-plus";
import { localGet, uploadImgServer } from '@/utils'
 
const props = defineProps({
    modelValue: {
        type: String,
        default: ""
    },
    plugins: {
        type: [String, Array],
        default:'lists link image table help wordcount',
    },
    toolbar: {
        type: [String, Array],
        default: 'undo redo | image | table',
    },
    father_method:Function,
});
// const editorContent = computed({
//   get: () => props.modelValue,
//   set: (val) => {
//     emit('input', val);    
//   }
// })
const emits = defineEmits(['update:modelValue']);
 
// const store = useStore();
const myTinyInit = reactive({
    // language_url: '../../tinymce/langs/zh-Hans.js', 
    // language: 'zh-Hans',
    selector:'#tinydemo',
    width: '100%',
    height: 500,
    branding: false,
    menubar: false,
    resize: false,
    skin_url: "/tinymce/skins/ui/oxide", //手动引入
    content_css: '/tinymce/skins/content/default/content.css', //手动引入
    toolbar_mode: "wrap",
    plugins: props.plugins,
    toolbar: props.toolbar,
    //图片上传方法（注意！！：要使用 promise 对象中的 resolve 返回图片路径，否则会报错）
    images_upload_handler: (blobInfo) => new Promise((resolve, reject) => {
        let formData = new FormData();
        formData.append('images', blobInfo.blob(), blobInfo.filename());
        axios.post(uploadImgServer, formData, {
            headers: ({
                'Content-Type': 'multipart/form-data',
                'token': localGet('token') || ''
            })
        }).then(res => {
            console.log("后端发来图片结果",res)
            if (res.code === 200) {
                // 插入图片后，不插入到富文本编辑器中，而是还给父组件，通过father_method方法
                // if(props.father_method){
                //     props.father_method(res.data.results)
                // }                
                resolve(res.data.results)
            } else {
                ElNotification.warning(res.message)
            }
        }).catch(error => {
            reject(error);
        })
    }),
});
 
onMounted(() => {
    tinymce.init({});
    // content.value=props.modelValue
}) 
const content = ref(props.modelValue);
watchEffect(()=>{
  console.log('watchEffect')
  console.log('props.modelValue',props.modelValue)
  content.value = props.modelValue
})
const change = (val) => {
    console.log('text chang ')
    content.value = val;
    emits("update:modelValue", val);
};

</script>
 
<style scoped lang="scss">
</style>